<template>
  <lay-card :bordered="true">
    <ContentHeader />
    <Loading :loading="isLoading">
      <!-- 操作区域 -->
      <TableAction>
        <lay-row>
          <lay-col :span="8" :offset="10">
            <lay-input
              size="xs"
              style="max-width: 200px; min-width: 100px"
              v-model="queryParam.search"
              placeholder="请输入用户名/姓名"
              allow-clear
            />
            <lay-button size="xs" style="margin-left: 10px" @click="handleSearch"
              >查询</lay-button
            >
            <lay-button size="xs" v-auth:add type="primary" @click="handleAdd"
              >新增</lay-button
            >
          </lay-col>
        </lay-row>
      </TableAction>

      <!-- 表格内容 -->
      <lay-table
        ref="table"
        :id="'user_id'"
        :size="'xs'"
        :resize="true"
        :default-toolbar="false"
        :height="'100%'"
        :width="'100%'"
        :loading="isLoading"
        :columns="columns"
        :data-source="data_list"
      >
        <template #role="{ row }">
          <template v-if="row.role.length > 0">
            <lay-space size="xs" style="flex-wrap: wrap">
              <lay-tag
                size="xs"
                :color="'#1e9fff'"
                variant="light"
                maxWidth="100px"
                v-for="(item, index) in row.role"
                :key="index"
                >{{ item.name }}</lay-tag
              >
            </lay-space>
          </template>
          <template v-if="row.role.length < 1">
            <lay-tag size="xs" v-if="row.is_super">超级管理员</lay-tag>
            <span v-else>---</span>
          </template>
        </template>

        <template #user_name="{ row }">
          <span style="margin-right: 6px">{{ row.user_name }}</span>
        </template>

        <template #action="{ row }">
          <lay-button size="xs" type="primary" v-auth:edit @click="handleEdit(row)"
            >编辑</lay-button
          >
          <template v-if="row.user_id != 3">
            <lay-button size="xs" type="danger" v-auth:delete @click="handleDelete(row)"
              >删除</lay-button
            >
          </template>
        </template>
      </lay-table>

      <!-- 分页 -->
      <lay-page
        v-model="queryParam.page"
        :layout="page_layout"
        :pages="5"
        :limits="limits"
        @change="handlePageChange"
        :limit="queryParam.per_page"
        :total="queryParam.total"
      />
    </Loading>
    <AddForm ref="AddFormRef" @callback="handleSearch" />
    <EditForm ref="EditFormRef" @callback="handleSearch" />
  </lay-card>
</template>

<script setup>
import { ref } from "vue";
import * as Api from "@/api/user/user";
import { refreshScrollTop } from "@/utils/tool";
import { info } from "@/utils/message";
import { layer } from "@layui/layui-vue";
import * as roleApi from "@/api/user/role";

import AddForm from "./modules/AddForm.vue";
import EditForm from "./modules/EditForm.vue";

const table = ref(undefined);
// 数据列表
const data_list = ref([]);
// 查询参数
const queryParam = ref({
  page: 1,
  limit: 10,
  total: 0,
  search: "",
});
// 正在加载
const isLoading = ref(false);
// 表头
const columns = ref([
  {
    title: "员工ID",
    key: "user_id",
    width: "100px",
    // fixed: "left",
    align: "center",
  },
  {
    title: "用户名",
    key: "user_name",
    width: "100px",
    fixed: "left",
    align: "center",
  },
  {
    title: "姓名",
    width: "180px",
    key: "real_name",
    align: "center",
  },
  {
    title: "所属角色",
    width: "180px",
    key: "role",
    customSlot: "role",
    align: "center",
  },
  {
    title: "排序",
    width: "180px",
    key: "sort",
    align: "center",
  },
  {
    title: "添加时间",
    width: "180px",
    key: "create_time",
    align: "center",
  },
  {
    title: "更新时间",
    width: "180px",
    key: "update_time",
    align: "center",
  },
  {
    title: "操作",
    width: "130px",
    fixed: "right",
    key: "action",
    ignoreExport: true,
    customSlot: "action",
    align: "center",
  },
]);
// 分页不同部分的展示, 可改变顺序。
const page_layout = ref(["count", "prev", "page", "next", "limits", "refresh", "skip"]);
// 分页选项
const limits = ref([10, 20, 50]);
const AddFormRef = ref(undefined);
const EditFormRef = ref(undefined);
// 权限列表
const roleList = ref([]);

// 搜索查询-刷新列表,强制刷新到第一页
const handleSearch = () => {
  queryParam.value.page = 1;
  loadData();
};

// 分页查询
const handlePageChange = (pag) => {
  queryParam.value.page = pag.current;
  queryParam.value.limit = pag.limit;
  loadData();
};

// 加载数据方法 必须为 Promise 对象
const loadData = () => {
  // 重置滚动高度
  refreshScrollTop();

  isLoading.value = true;
  Api.list(queryParam.value)
    .then((response) => {
      const {
        data: { list },
      } = response;
      if (list) {
        // 当前页码
        queryParam.value.current_page = list.current_page;
        // 每页条数
        queryParam.value.limit = list.per_page;
        // 总条数
        queryParam.value.total = list.total;
        // 数据列表
        data_list.value = list.data;
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
};

// 默认加载数据
loadData();

// 获取权限信息
isLoading.value = true;
roleApi
  .list()
  .then((result) => {
    if (result.status == 200) {
      const {
        data: { list },
      } = result;
      roleList.value = list;
    }
  })
  .finally(() => {
    isLoading.value = false;
  });

// 新增记录
const handleAdd = () => {
  AddFormRef.value.show(roleList.value);
};

// 编辑记录
const handleEdit = (item) => {
  EditFormRef.value.show(item, roleList.value);
};

// 删除记录
const handleDelete = (item) => {
  layer.confirm(
    "<p style='color:red;'><b>⇢</b>【" + item.user_name + "】<br/>删除后不可恢复!</p>",
    {
      title: "您确定要删除该记录吗? ",
      shade: true,
      shadeOpacity: 0.3,
      isHtmlFragment: true,
      btn: [
        {
          text: "确定",
          callback: (id) => {
            Api.deleted({ userId: item["user_id"] })
              .then((result) => {
                // 提示
                info(result.message);
                // 刷新数据
                handleSearch();
              })
              .finally(() => {
                layer.close(id);
              });
          },
        },
        {
          text: "取消",
          callback: (id) => {
            layer.close(id);
          },
        },
      ],
    }
  );
};
</script>
